<template>
  <div class="app-container">
    <basics-form :minWidth="'300px'" ref="basicsForm" :actionLoading="loading" @actionBtnsClick="actionBtnsClick"
      @submit="search" />
    <div v-show="!haveData">暂无数据</div>
    <div id="line" v-show="haveData" style="width: 80vw; height: 400px;margin-left: -75px;"></div>
    <div v-show="haveData">
      <el-table v-loading="tableLoading" :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="normalNum" label="正常血压次数">
        </el-table-column>
        <el-table-column prop="abnormalNum" label="异常血压次数">
        </el-table-column>
        <el-table-column prop="" label="收缩压最高值">
          <template slot-scope="scope">
            {{ scope.row.sbpHighestVal }}
            <span style="color: red" v-if="scope.row.sbpBloodPressureLevel">
              （ {{ scope.row.sbpBloodPressureLevel }}）
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="dbpHighestVal" label="舒张压最高值">
          <template slot-scope="scope">
            {{ scope.row.dbpHighestVal }}
            <span style="color: red" v-if="scope.row.dbpBloodPressureLevel">
              （ {{ scope.row.dbpBloodPressureLevel }}）
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="bloodPressureAverage" label="血压平均值">
        </el-table-column>
        <el-table-column prop="pulsePressureAverage" label="脉压差平均值">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import BasicsForm from "@/components/BasicsForm";
  import {
    patientBloodPressureTestTrendChart
  } from "@/api/manbing/patient";
  export default {
    name: "patient-charts",
    components: {
      BasicsForm
    },
    data() {
      return {
        loading: false,
        tableLoading: false,
        queryParams: {},
        haveData: false,
        tableData: [],
        standard:null,//血压异常标准
      };
    },
    created() {},
    methods: {
      init(patientId,standard) {
        this.haveData = false;
        this.queryParams.patientId = patientId;
        this.standard = standard;
        this.$nextTick(() => {
          this.initRules();
        });
      },

      //顶部搜索组件
      initRules() {
        let rules = [{
            title: "日期",
            key: "date",
            type: "daterange",
            value: [this.getDate("yearFirstDay"), this.getDate("end")],
            skip: true,
          },
          {
            type: "actionBtns",
            selectList: [{
              name: "搜索",
              value: "primary"
            }],
            ruleWidth: "auto",
          },
        ];
        this.$refs.basicsForm.initForm(rules);
        this.$nextTick(() => {
          this.$refs.basicsForm.formValid();
        });
      },
      getDate(type) {
        let date = null;
        if (type != "start") {
          date = new Date();
        } else {
          return "2021-01-01";
        }
        let year = date.getFullYear();
        let month = type == "yearFirstDay" ? 1 : date.getMonth() + 1;
        let day = 1;
        if (type == "end") {
          day = date.getDate();
        }
        month = month > 9 ? month : "0" + month;
        day = day > 9 ? day : "0" + day;
        return `${year}-${month}-${day}`;
      },
      //顶部按钮点击
      actionBtnsClick(index) {
        this.queryParams.pageNum = 1;
        this.$refs.basicsForm.formValid();
      },
      //搜索
      search(param) {
        if (!param) {
          return;
        }
        this.queryParams.startDate = "";
        this.queryParams.endDate = "";
        if (param.date && param.date.length) {
          this.queryParams.startDate = param.date[0];
          this.queryParams.endDate = param.date[1];
        }
        this.getList();
      },
      //列表数据
      getList() {
        this.loading = true;
        this.tableLoading = true;
        patientBloodPressureTestTrendChart(this.queryParams)
          .then((res) => {
            this.haveData = false;
            this.tableData = [];
            if (res.code == 200) {
              if (res.data.list.length) {
                this.haveData = true;
              }
              this.initEcharts(res.data.list);
              this.tableData.push({
                normalNum: res.data.normalNum,
                abnormalNum: res.data.abnormalNum,
                sbpHighestVal: res.data.sbpHighestVal,
                sbpBloodPressureLevel: res.data.sbpBloodPressureLevel,
                dbpHighestVal: res.data.dbpHighestVal,
                dbpBloodPressureLevel: res.data.dbpBloodPressureLevel,
                bloodPressureAverage: res.data.bloodPressureAverage,
                pulsePressureAverage: res.data.pulsePressureAverage,
              });
            }
          })
          .finally(() => {
            this.loading = false;
            this.tableLoading = false;
          });
      },
      initEcharts(list) {
        var chartDom = document.getElementById("line");
        var myChart = echarts.init(chartDom);
        var option;
        let xAxisData = [],
          dbp = [],
          sbp = [];
        list.forEach((item) => {
          xAxisData.push(item.testDate);
          dbp.push(item.dbp);
          sbp.push(item.sbp);
        });
        option = {
          xAxis: {
            type: "category",
            boundaryGap: false, //从x轴顶格开始，
            onZero: true, //未知
            show: false, // 是否 展示 x轴 和 x轴标签
            data: xAxisData,
            axisLabel: {
              fontSize: 10, //['4日19时', '5日0时', '5日5时', '5日10时', '5日15时', '5日20时', '6日1时','6日16时', '6日21时','7日2时','7日7时', '7日12时', '7日17时']
            },
          },
          yAxis: {
            type: "value",
            name: "mmHg",
            nameTextStyle: {
              fontSize: 10, //潮位:cm
            },
            axisLabel: {
              fontSize: 10, //[520, 232, 501, 134, 290, 330, -320,520, 232, 501, 134, 290, 330, -320]
            },
          },
          dataZoom: { // 放大和缩放
                type: 'inside'
              },
          series: [{
              data: dbp,
              name: "舒张压",
              type: "line",
              smooth: true, //未知
              smooth: 0.6,
              lineStyle: {
                width: 1,
              },
                markLine: {
                  data: [{
                    yAxis: this.standard.dbpNum,
                    label: {
                      position: "end",
                      formatter: (e) => {
                        return "舒张压基准线：" + e.value
                      }
                    }
                  }, ],
                  silent: false, //鼠标移入警戒线，警戒线会变粗，false不变，true变
                  symbol: false,
                  lineStyle: { //警戒线的样式，颜色，宽度，类型
                    color: 'red',
                    type: 'dashed', //还有实线，
                    width: 1
                  },
                }
            },
            {
              data: sbp,
              name: "收缩压",
              type: "line",
              smooth: true, //未知
              smooth: 0.6,
              lineStyle: {
                width: 1,
              },
              markLine: {
                data: [{
                  yAxis: this.standard.sbpNum,
                  label: {
                    position: "end",
                    formatter: (e) => {
                      return "收缩压基准线：" + e.value
                    }
                  }
                }, ],
                silent: false, //鼠标移入警戒线，警戒线会变粗，false不变，true变
                symbol: false,
                lineStyle: { //警戒线的样式，颜色，宽度，类型
                  color: 'red',
                  type: 'dashed', //还有实线，
                  width: 1
                },
              }
            },

          ],
          legend: {
            show: true,
          },
          tooltip: {
            trigger: "axis",

            axisPointer: {
              type: "cross",

              crossStyle: {
                color: "#999",
              },
            },
          },
        };

        option && myChart.setOption(option);
      },
    },
  };
</script>
